<template>
  <div>
    <footer v-if="total >pageInfo.pageSize">
      <div class="quantity">
        <span>共{{ total }}条记录</span>
        <span>第{{ total ? pageInfo.pageIndex : 0 }}/{{
          totalPage
        }}页</span>
      </div>
      <div class="page-control">
        <el-button
          type="primary"
          :class="{disabled: pageInfo.pageIndex===1}"
          :disabled="pageInfo.pageIndex === 1"
          @click="$emit('toPrev')"
        >上一页</el-button>
        <el-button type="primary" :class="{disabled: pageInfo.pageIndex==totalPage}" :disabled="pageInfo.pageIndex ==totalPage " @click="$emit('toNext')">下一页</el-button>
      </div>
    </footer>
  </div>
</template>

<script>
export default {
  props: ['total', 'pageInfo', 'totalPage']
}
</script>

<style lang="scss" scoped>
 footer {
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    .quantity {
      font-size: 16px !important;
      color: #dbdfe5 !important;
    }
    .el-button{
  background-color: #d5ddf8;
      border: 0;
    }
    .disabled {
      background: #edf0f9 !important;
      border: 0;
    }
  }
</style>
